<template>
      <div  v-if="discuss && discuss.deleted == 0">
                     
               <img :src="discuss.headphoto" class="headphoto" @click="toPersonal(discuss.createdUid)">
               
               <div class="box ContentBack">
                     <!-- 评论者信息 -->
                     <div class="flex box"> 
                        <button class="name">{{discuss.username}}</button>
                        <button class="tag writer" v-if="discuss.createdUid == ArticleDetail?.createdUid">作者</button>
                        
                        <!-- 有回复 -->
                        <button v-if="discuss.replyUid && discuss.replyUsername && discuss.replyUid != discuss.createdUid" class="replyedname flex">
                              <font-awesome-icon icon="play" class="replyIcon"/>{{discuss.replyUsername}}
                        </button>

                        <div class="time">{{discuss.createdTime | time}}</div>       
                     </div>  
                     <!-- 内容 -->
                     <div id="Content">
                          <div class="box flex" v-html="discuss.content"> </div>                       
                        
                     </div>


                     <!-- 功能 -->
                     <div class="flex fun">
                        <button v-for="fun in  getFunData(discuss.createdUid)" :key="fun.id" 
                           :class="getClass(fun.class)"
                         
                           @click="SelectFun(fun,discuss)">
                           <font-awesome-icon :icon="fun.icon" class="icon"/>
                           <div>{{fun.label}}</div>
                        </button>
                     </div>
               </div>      
         </div>
</template>
<script>
import { mapActions, mapMutations, mapState } from 'vuex'
  export default 
  {
     name :'', 
     props:['discuss'],
     computed:{
       ...mapState('ArticleDetail',['ArticleDetail']), //文章详情 
       ...mapState('Discuss',['DiscussData']), //评论数据 
       ...mapState('Login',['User']), //用户
     },

      data() {
      return {
         timer:null,
         funData:[  //type 1 别人的评论 2 自己的评论 3 自己是作者且是自己的评论 4 公共
            {id:1,label:'举报',type:1,icon:'circle-info',class:'tag-warning',time:0},
            {id:2,label:'删除',type:2,icon:'trash-can',class:'tag-danger',click:this.beforeDelete,time:0},
            {id:3,label:'置顶',type:3,icon:'circle-up',class:'tag-primary',time:0},
            {id:4,label:'回复',type:4,icon:'comments',class:'tag-success',time:0,click:this.reply_},
         ]
      }
     },
     methods:{
        ...mapActions('Discuss',['getDiscuss','deleteDiscuss','deleteReply']), //得到评论 删除评论 删除回复
        ...mapMutations('Discuss',['DISCUSSON','REPLYON']), //评论窗口出现
         
         getClass(funClass){
            funClass = 'flex ' +funClass
            return funClass
         },
         TimeKeeping(fun){ //计时
           clearTimeout(this.timer)
           this.timer = setTimeout(() => {
               fun.time = 0
               clearTimeout(this.timer)
             },3000);
        },
          toPersonal(uid){
            this.$public.ToPersonal(uid)
        },
         //输出信息
         MessageShow(res){
       
              if(res.code == 200) return this.$message.success(res.message)
              if(res.code == -1) return this.$public.toLogin()
              this.$message.error(res.message)
         },
         //删除之前
           beforeDelete(item) {
              this.$confirm('此操作将永久删除该评论, 是否继续?', '提示', {
                  confirmButtonText: '确定',
                  cancelButtonText: '取消',
                  type: 'warning'
               }).then(() => {
                     this.handleDelete(item)
               }).catch(()=>{})
         },
        
         //删除 评论 || 回复
         async handleDelete(item){
              let res 
              if(item.discussId == 0)
               {
                     res = await this.deleteDiscuss(item)          
                     if(res.code == 200) this.ArticleDetail.extra.discusscount -= 1 + item.replyCount   
               }    
               else {
                  res = await this.deleteReply(item)          
                  if(res.code == 200) this.ArticleDetail.extra.discusscount -= 1
               }
              this.MessageShow(res) 
         },
         //回复
         reply_(item){          
             let data ={}
             data.type=2
             data.discussTitle='回复 ' +  item.username
             data.discussId = item.discussId == 0 ? item.id : item.discussId
             data.replyUid =  item.discussId == 0 ? null : item.createdUid 
             data.replyUsername = item.discussId == 0 ? null : item.username 
             this.DISCUSSON(data)
         },
         //对操作做一些集体操作
         SelectFun(fun,item){

            if(this.User == null) return this.$public.toLogin() //未登录

            if( ! fun.click) return this.$message.warning('功能暂未实现')
          
             try{                   
                fun.time += 1
                this.TimeKeeping(fun)
                if(fun.time >= 4)  return this.$message.warning('不要频繁操作')     
                fun.click(item)
             }catch(error){this.$message.error(error)}
         },
         //得到Fun
          getFunData(discussuid){
             let allow = [4]
             let uid= this.User?.uid || 0
             let createdUid = this.ArticleDetail?.createdUid || 0
             allow.push( discussuid == uid ?  2 : 1) //判断是否是自己的评论
             allow.push( createdUid == uid && uid != 0 ? 3 : 4 ) //判断是否是作者
             return this.funData.filter(item => allow.includes(item.type))
         },
     },
     beforeDestroy(){
        clearTimeout(this.timer)
     },
  }
</script>
<style scoped lang='less'>

img{
   margin-right: 5px;
}
.box{
   width: 100%;
   justify-content: flex-start;
   .name{
      font-size: 25px;
      color: orangered;
      margin-right: 10px;
      letter-spacing: 0;
      font-weight: 600;
      margin-left: 5px;
   }
   // 标签
   .tag{
      padding: 2px 4px;
      border-radius: 5px;
      margin-right: 5px;
   }
   //作者
   .writer{
      background: red;
      color: white;
   }
   //名字 回复名字
    .name,.replyedname{
      font-size: 20px;        
      margin: 0 5px;
      letter-spacing: 0;     
      color: orangered;
   }
   //回复图标
   .replyIcon{
       margin-right: 10px;
       font-size: 14px;
        color: orangered;
   }
     
   .time{
      color: #4D4D4D;
      letter-spacing: 0;
      font-size: 14px;
   }
}
.ContentBack{
   padding: 0 5px;
   box-sizing: border-box;
}
#Content{
   margin: 5px;
   border-radius: 5px 5px 5px 5px;
   overflow: hidden;
   width: 100%;
   padding: 10px;
   box-sizing: border-box;
   background: #efefef;
   color: #000;



.replycount{
     display: inline-block;
     border-radius: 5px;
     margin-top: 10px;
     max-width: 50%;
     color: orangered;
     font-size: 15px;
     letter-spacing: 0;
   }

   .lineBox{
      background: red;
      text-align: left;
      justify-content: flex-start;
   }
   .box{
      width: 100%;
      justify-content: flex-start;
      word-wrap:break-word; 
      word-break: break-all;

   }
   
}
.fun{
   width: 100%;
   justify-content: flex-end;
   margin-top: 10px;

   button{
      border-radius: 5px;
      padding: 10px;
      margin-left: 5px;
      margin-top: 5px;
      font-weight: 600;
   }
   .icon{
        margin-right: 5px;
   }
}
</style>